<script setup>
import { ref, defineProps, inject } from 'vue'
import { getKWMusicListService } from '@/api/music'
import { useMusicCell } from '@/composables/musicCell.js'
const musicCell = useMusicCell()
// import { useRouter, useRoute } from 'vue-router'
// 路由参数对象
// const route = useRoute()
// const queryKey = computed(() => route.query.search)
// const router = useRouter()

// 音乐列表渲染数据
const musicList = ref([
  {
    NAME: '音乐名称',
    ARTIST: '歌手',
    ALBUM: '专辑',
    DURATION: '0', // 时长
    hts_MVPIC: '', // 封面
    DC_TARGETID: '324244'
  }
])

const props = defineProps({
  queryKey: String
})
// 搜索参数
const querySearch = ref({
  pn: 0,
  rn: 20,
  all: props.queryKey
})

const musicPlayer = inject('musicPlayerRef')
// 添加音乐 1.音乐的索引 2.是否立即播放
const onAddMusic = async (index, isPlay) => {
  await musicCell.addMusic(musicList.value[index], isPlay)
  // router.push('/test')
}
// 收藏
const onAddLike = (item) => {
  musicCell.addLike(item, [0])
}
// 更多
const emit = defineEmits(['show-more'])
const onShowMore = (item) => {
  emit('show-more', item)
}

// 滚动加载音乐列表
const loading = ref(false)
const error = ref(false)
const finished = ref(false)

// getMusicList()

const onLoad = async () => {
  // querySearch.value.pn += 1
  // 异步更新数据
  try {
    const musics = await getKWMusicListService(querySearch.value)
    if (querySearch.value.pn === 0) {
      musicList.value = musics.data.abslist
    } else {
      musicList.value.push(...musics.data.abslist)
    }
    querySearch.value.pn += 1

    // 加载状态结束
    loading.value = false

    // 数据全部加载完成
    if (musicList.value.length >= 60) {
      finished.value = true
    }
    if (musics.data.abslist <= 0) {
      finished.value = true
    }
  } catch (err) {
    // if (querySearch.value.pn > 0) querySearch.value.pn -= 1
    error.value = true
    loading.value = false
  }
}

// const onDownloadFile = async (index) => {
//   await musicCell.downloadFile(musicList.value[index])
// }
</script>
<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    v-model:error="error"
    error-text="请求失败，点击重新加载"
    @load="onLoad"
  >
    <!-- :label="item.ARTIST + '-' + item.ALBUM" -->
    <van-cell
      clickable
      center
      v-for="(item, index) in musicList"
      :key="item.DC_TARGETID"
      @click="onAddMusic(index, 1)"
    >
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <!-- <span class="custom-title" style="padding-right: 5px">
          {{ item.NAME }}
        </span> -->
        <van-highlight
          :keywords="props.queryKey"
          :source-string="item.NAME"
          style="padding-right: 5px"
          tag="span"
        />
        <van-tag plain type="primary">{{
          musicPlayer.formatTime(item.DURATION)
        }}</van-tag>
      </template>
      <!-- 使用 label 插槽来自定义标签 -->
      <template #label>
        <van-highlight
          :keywords="props.queryKey"
          :source-string="item.ARTIST + '-' + item.ALBUM"
          highlight-class="highLight-text"
        />
      </template>
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <div class="right-icon">
          <!-- 添加 -->
          <i>
            <van-icon
              class-prefix="my-icon"
              name="addNext"
              @click.stop="onAddMusic(index, 0)"
            />
          </i>
          <!-- 收藏 -->
          <i><van-icon @click.stop="onAddLike(item)" name="star-o" /></i>
          <!-- 更多 -->
          <i><van-icon name="ellipsis" @click.stop="onShowMore(item)" /></i>
        </div>
      </template>
    </van-cell>
  </van-list>
</template>
<style scoped>
/* 音乐列表 */
::v-deep .highLight-text {
  color: #80b4c6;
}
</style>
